<template>
    <div id="roe-base-bar-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script>
import { onMounted, ref , watch , reactive} from "vue";
import { weekStockSearch } from '../stores/week'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { getFinanceData } from "../service/stock";
import { buildBaseBar } from "../myechart/BaseBarEchart"

export default {
    setup() {
        const stockSearchStore = weekStockSearch()
        let { input } = storeToRefs(stockSearchStore) 

        // 网址传参
        const {query: query} = useRoute()
        if(query.stock) {
            input.value = query.stock
        }

        // 只监听pinia中某一个值的变化
        watch(() => input.value, (newValue, oldValue) => {
            loadEchart()
        })

        let myChart = null
        const initEchart = () => {
            myChart = echarts.init(document.getElementById('roe-base-bar-echart'))
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
        }

        const loadEchart = () => {
            getFinanceData(input.value).then(res => {
                console.log(res)
                let option = buildBaseBar(res.data)
                myChart.setOption(option)
            })
        }

        onMounted(()=> {
            initEchart()
            loadEchart()
        })
    }
}
</script>